<template>
  <div class="requirement-management-detail">
    <!-- 上方展示信息区域 -->
    <div class="header-info">
      <div class="info-left">
        <!-- 需求名称区域 -->
        <div class="requirement-name-container">
          <span class="requirement-name-title">需求名称：</span>
          <span class="requirement-name-value">{{ requirementData.dname }}</span>
        </div>
        <!-- 其他信息区域 -->
        <div class="additional-info">
          <span class="requirement-no">需求编号：{{ requirementData.dno }}</span>
          <span class="contract-no">关联合同号：{{ requirementData.coNo }}
            <el-link type="primary" size="small" style="margin-left: 10px; transform: translateY(-1px);">前往查看</el-link>
          </span>
        </div>
        <div class="additional-info">
          <span class="requirement-type">需求类别：{{ requirementData.dtype === 1 ? '工程类' : '直销类' }}</span>
          <span class="material-content">物料内容：{{ requirementData.materialName }}</span>
        </div>
        <div class="additional-info">
          <span class="creator">创建人：{{ requirementData.createUserName }}</span>
          <span class="create-time">创建时间：{{ requirementData.createTime }}</span>
        </div>
      </div>
      <div class="info-right">
        <el-button @click="handleBack" plain>返回</el-button>
      </div>
    </div>

    <!-- 下方左右布局区域 -->
    <div class="main-content-container">
      <!-- 左侧选项卡 -->
      <div class="left-sidebar">
        <h3 class="config-title">需求参数</h3>
        <div class="tab-container">
          <div
            class="tab-item"
            :class="{ active: activeTab === 'technical' }"
            @click="activeTab = 'technical'"
          >
            <span class="dot"></span>
            <span class="tab-text">技术参数</span>
          </div>
          <div
            class="tab-item"
            :class="{ active: activeTab === 'business' }"
            @click="activeTab = 'business'"
          >
            <span class="dot"></span>
            <span class="tab-text">业务参数</span>
          </div>
        </div>
      </div>

      <!-- 中间分割线 -->
      <div class="divider"></div>

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <!-- 右侧标题 -->
        <div class="right-header">
          <h3 class="content-title">
            {{ activeTab === 'technical' ? '技术参数' : '业务参数' }}
          </h3>
        </div>

        <!-- 右侧内容 -->
        <div class="content-area">
          <!-- 技术参数内容区 -->
          <div v-if="activeTab === 'technical'" class="technical-content">
            <div class="technical-grid">
              <el-table :data="technicalParamsList" style="width: 100%" border>
                <el-table-column prop="parameterName" label="配置的字段" align="left"/>
                <el-table-column prop="parameterName" label="配置的字段" align="left" />
                <el-table-column prop="parameterName" label="配置的字段" align="left" />
                <el-table-column prop="parameterName" label="配置的字段" align="left" />
                <el-table-column prop="parameterName" label="配置的字段" align="left" />
                <el-table-column prop="parameterName" label="配置的字段" align="left" />
                <el-table-column prop="parameterName" label="配置的字段" align="left" />
              </el-table>
            </div>
          </div>

          <!-- 业务参数内容区 -->
          <div v-else-if="activeTab === 'business'" class="business-content">
            <div class="business-item">
              <div class="business-label">紧急程度：</div>
              <div class="business-value">
                {{ getTypeLabel(urgencyLevelOptions, requirementData.degreeUrgency) }}
              </div>
            </div>
            <div class="business-item">
              <div class="business-label">交付日期：</div>
              <div class="business-value">{{ requirementData.delivery }}</div>
            </div>
            <div class="business-item">
              <div class="business-label">客户要求：</div>
              <div class="business-value customer-requirements">
                {{ requirementData.requirements }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {
  getDemandDetail
} from '@/api/business/demand'
import { getTypeLabel } from '@/utils/commonTransfer'
const router = useRouter();
const route = useRoute();
// 活动选项卡
const activeTab = ref('technical');
const requirementData = reactive({
  dname: '',
  dno: '',
  coNo: '',
  dtype: undefined,
  materialName: '',
  createUserName: '',
  createTime: '',
  degreeUrgency: '',
  delivery: '',
  requirements: '',
  file: '',
})
const urgencyLevelOptions = ref([
  { label: '一般', value: 1 },
  { label: '正常', value: 2 },
  { label: '紧急', value: 3 }
])
// 技术参数列表
const technicalParamsList = [
  {
    parameterName: '参数1',
  },
  {
    parameterName: '参数2',
  },
  {
    parameterName: '参数4',
  },
  {
    parameterName: '参数5',
  },
  {
    parameterName: '参数6',
  },
  {
    parameterName: '参数7',
  },
  // ... 更多技术参数
];
// 监听路由参数变化，更新流程信息
watch(
  () => route.params,
  (newParams) => {
    if (newParams.requirementId) {
      getDemandDetail(newParams?.requirementId).then(res => {
        if (res.code === 200 && res.data) {
          // console.log('res.data', res.data)
          // // 使用Object.assign保留响应性
          Object.assign(requirementData, res.data || {});
          // getOrderList()
          // getProductList()
        }
      }).catch(() => {})
    }
  },
  { immediate: true, deep: true }
)

// 处理返回按钮点击
const handleBack = () => {
  router.push({
    path: '/business/demand',
  })
};
</script>

<style scoped>
.requirement-management-detail {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 50px);
}

/* 上方展示信息区域样式 */
.header-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.info-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 需求名称容器 */
.requirement-name-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.requirement-name-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.requirement-name-value {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 额外信息区域 */
.additional-info {
  display: flex;
  align-items: center;
  gap: 0;
}

.info-left .requirement-no,
.info-left .requirement-type,
.info-left .creator {
  font-size: 14px;
  color: #606266;
  margin-right: 200px;
  min-width: 160px;
}

.info-left .contract-no,
.info-left .material-content,
.info-left .create-time {
  font-size: 14px;
  color: #606266;
  min-width: 280px;
}

.info-right {
  display: flex;
  align-items: flex-start;
}

/* 下方左右布局区域样式 */
.main-content-container {
  display: flex;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  height: 600px;
}

/* 左侧选项卡样式 */
.left-sidebar {
  width: 200px;
  background-color: #f5f7fa;
  padding: 25px 20px 20px 20px;
  display: flex;
  flex-direction: column;
}

.config-title {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-top: 0;
}

.tab-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tab-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-item.active {
  background-color: #2457d7;
  color: #fff;
}

.tab-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
}

.tab-item:not(.active) .dot {
  background-color: #409eff;
}

.tab-item.active .dot {
  background-color: #ccc;
}

.tab-text {
  font-size: 14px;
}

/* 中间分割线样式 */
.divider {
  width: 1px;
  background-color: #e8e8e8;
  height: 100%;
}

/* 右侧内容区域样式 */
.right-content {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 右侧头部样式 */
.right-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.content-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.content-area {
  flex: 1;
  overflow-y: auto;
}

/* 技术参数内容样式 */
.technical-content {
  width: 100%;
}

.technical-grid {
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.grid-header {
  display: flex;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e8e8e8;
}

.grid-row {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
}

.grid-row:last-child {
  border-bottom: none;
}

.grid-cell {
  flex: 1;
  padding: 12px;
  text-align: center;
  border-right: 1px solid #e8e8e8;
}

.grid-cell:last-child {
  border-right: none;
}
</style>
